<template>
    <div>
        <MBX
            level="商品管理"
            level2="商品列表"
        >
            <template v-slot:goods>
                <el-breadcrumb-item>添加商品</el-breadcrumb-item>
            </template>
        </MBX>
        <br>
        <el-card>
            <el-alert
                title="添加商品信息"
                type="info"
                center
                show-icon
            >
            </el-alert>
            <!-- 步骤条 -->
            <el-steps
                :active="active*1"
                finish-status="success"
                :space="200"
            >
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- 步骤条 -->
            <!-- tab切换 -->
            <el-form>
                <el-tabs
                    tab-position="left"
                    v-model="active"
                    :before-leave="xiayibu"
                    @tab-click="dongjing"
                >
                    <el-tab-pane
                        label="基本信息"
                        name="0"
                    >
                        <el-form :model="goodsaddform">
                            <el-form-item label="商品名称">
                                <el-input v-model="goodsaddform.goods_name"></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格">
                                <el-input v-model="goodsaddform.goods_price"></el-input>
                            </el-form-item>
                            <el-form-item label="商品重量">
                                <el-input v-model="goodsaddform.goods_weight"></el-input>
                            </el-form-item>
                            <el-form-item label="商品数量">
                                <el-input v-model="goodsaddform.goods_number"></el-input>
                            </el-form-item>
                            <el-form-item label="商品分类">
                                <br>
                                选择商品分类： {{values}}<el-cascader
                                    v-model="values"
                                    :options="goodsfenlei"
                                    :props="propsProps"
                                ></el-cascader>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane
                        name="1"
                        label="商品参数"
                    >
                        <el-form-item
                            v-for="(item,index) in dongtai"
                            :key="index"
                            :label="item.attr_name"
                        >
                            <el-checkbox-group v-model="item.attr_vals">
                                <el-checkbox
                                    v-for="(itm,ind) in item.attr_vals"
                                    :key="ind"
                                    :label="itm"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane
                        name="2"
                        label="商品属性"
                    >
                        <el-form-item
                            v-for="(item,index) in jingtai"
                            :key="index"
                            :label="item.attr_name"
                        >
                            <el-input
                                v-for="(itm,ind) in item.attr_vals"
                                :key="ind"
                                :value="itm"
                            ></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane
                        name="3"
                        label="商品图片"
                    >
                        <el-upload
                            class="upload-demo"
                            action="http://www.ysqorz.top:8888/api/private/v1"
                            list-type="picture"
                        >
                            <el-button
                                size="small"
                                type="primary"
                            >点击上传</el-button>
                            <div
                                slot="tip"
                                class="el-upload__tip"
                            >只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane
                        name="4"
                        label="商品内容"
                    >
                        <quill-editor v-model="goodsaddform.goods_introduce" />
                    </el-tab-pane>
                    <el-tab-pane
                        name="5"
                        label="商品添加"
                    >
                        <el-button
                            type="primary"
                            @click="addgoods"
                        >添加商品</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <!-- tab切换 -->
        </el-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      goodsaddform: {
        goods_name: "",
        goods_cat: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: [],
        attrs: []
      },
      goodsfenlei: [],
      propsProps: {
        expandTrigger: "hover",
        children: "children",
        label: "cat_name",
        value: "cat_id"
      },
      values: [],
      dongtai: [],
      jingtai: []
    };
  },
  created() {
    this.flxr();
  },
  methods: {
    //   渲染商品分类
    async flxr() {
      let res = await this.$API.shangpinfenlei();
      console.log("商品分类", res);
      this.goodsfenlei = res;
    },
    // 点击tab触发
    xiayibu(news, old) {
      console.log("news", news);
      console.log("old", old);
      if (old == 0 && this.values.length < 3) {
        // alert(111);
        // return false;
        this.$message({
          message: "请选择商品分类",
          type: "warning"
        });
        return false;
      }
    },
    async dongjing() {
      if (this.active == 1) {
        let res = await this.$API.canshuliebiao(this.goodsid);

        res.map(item => {
          item.attr_vals = item.attr_vals.split(",");
        });
        this.dongtai = res;
        console.log("动态参数请求", res);
      } else if (this.active == 2) {
        let res = await this.$API.canshuliebiao(this.goodsid, "only");
         res.map(item => {
          item.attr_vals = item.attr_vals.split(",");
        });
        this.jingtai = res;
        console.log("静态参数请求", res);
      }
    },
    async addgoods() {
      console.log(this.goodsaddform.attr_vals);
      this.goodsaddform.goods_cat = this.values.join(",");
      let arr1 = _.cloneDeep(this.dongtai);
      arr1 = arr1.map(item => {
        return {
          attr_id: item.attr_id,
          attr_value: item.attr_vals.join(",")
        };
      });
      let arr2 = _.cloneDeep(this.jingtai);
      arr2 = arr2.map(item => {
        return {
          attr_id: item.attr_id,
          attr_value: item.attr_vals.join(",")
        };
      });

      this.goodsaddform.attrs = [...arr1, ...arr2];
      let form = _.cloneDeep(this.goodsaddform);
      console.log(this.goodsaddform.attrs);

      let res = await this.$API.tianjiashangpin(form);
      console.log("添加商品", res);
      this.$router.push("/goods")
    }
  },
  computed: {
    goodsid() {
      return this.values[this.values.length - 1];
    }
  }
};
</script>

<style>
.ql-editor {
  height: 300px;
}
</style>
